<template>
  <div class="app-container">
    <el-form
      ref="loginRef"
      :model="form"
      class="login-form"
      label-width="120px"
    >
      <el-form-item
        label="工具名称："
        placeholder="请输入"
        style="width: 330px"
      >
        <el-input v-model="queryParams.toolName" />
      </el-form-item>
      <el-form-item>
        <el-button color="#265DA4" :dark="isDark" icon="Search" @click="handleQuery" v-hasPermi="['manager:toolManager:query']">查询</el-button>
        <el-button icon="Plus" @click="handleAdd" v-hasPermi="['manager:toolManager:add']">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="exam-box-list">
      <div class="box-body-wrapper">
        <div class="body">
          <div class="close">x</div>
          <div
            class="exam-item-list"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="module-title">
              <img src="../../../assets/images/exam-img-icon.jpg" />
              <div class="type-title">{{ item.toolName }}</div>
            </div>
            <div class="exam-item-wrapper">
              <div class="exam-item" v-for="(list) in item.toolData" :key="list.toolId" @click="handleEdit(list)">
                <img :src="list.toolImage" />
                <div class="exam-title">{{ list.toolName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="open"
      width="500px"
      append-to-body
      
      class="dialogClass" close-icon="CloseBold"
    >
      <template #title>
        <!-- <el-icon  color="#fff"><CollectionTag /></el-icon> -->
        <span>{{title}}工具</span>
      </template>
      <el-form ref="demoRef" :model="form" :rules="rules">
        <el-form-item
          label="工&nbsp;&nbsp;具&nbsp;&nbsp;&nbsp;名&nbsp;&nbsp;称："
          prop="toolName"
          style="width: 330px"
        >
          <el-input v-model="form.toolName" placeholder="请输入工具名称" />
        </el-form-item>
        <el-form-item prop="toolLevel" label="工具等级类别：">
          <el-select v-model="form.toolLevel" placeholder="请选择考题类型">
            <el-option
              v-for="dict in levelList"
              :key="dict.dictCode"
              :label="dict.dictLabel"
              :value="dict.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="工&nbsp;&nbsp;具&nbsp;&nbsp;&nbsp;图&nbsp;&nbsp;片："
          prop="toolImage"
          style="width: 330px"
        >
          
          <el-upload
                :show-file-list="false"
                action=""
                :http-request="httpRequest"
                multiple
                :on-preview="handlePreview"
              >
                <img v-if="form.toolImage" :src="form.toolImage" class="avatar" />
                <el-icon v-else class="el-icon-plus avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#265DA4" @click="submitForm">确 定</el-button>
          <el-button @click="open = false" color="#265DA4" plain>取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  gettoolManager,
  toolManagerAdd,
  toolManagerEdit,
  toolManagerDelete,
} from "@/api/manage/manage";
import { getImageUrl } from "@/utils/getImageUrl";
import { listData } from "@/api/system/dict/data";
import { ossUpload } from "@/api/knowledge/library";

const open = ref(false);
const levelList = ref([]);
const fileList = ref([]);
const imageUrl = ref("");
const list = ref([]);
const title = ref('新增')

const data = reactive({
  form: {},
  queryParams: {
    pageSize: 10,
    pageNum: 1,
    toolName: "",
  },
  rules: {
    toolName: [
      { required: true, message: "工具名称不能为空", trigger: "blur" },
    ],
    toolLevel: [
      { required: true, message: "工具等级类别不能为空", trigger: "blur" },
    ],
    toolImage: [
      { required: true, message: "工具图片不能为空", trigger: "blur" },
    ],
  },
});
const { queryParams, form, rules } = toRefs(data);
const { proxy } = getCurrentInstance();

let examDialogList = ref([
  {
    title: "初级考核工具",
    array: [
      {
        image: getImageUrl("chuji_icon1"),
        title: "打字速度考核工具",
        component: "",
      },
    ],
  },
  {
    title: "中级考核工具",
    array: [
      {
        image: getImageUrl("chuji_icon1"),
        title: "打字速度考核工具",
        component: "TypeTest",
      },
      {
        image: getImageUrl("chuji_icon2"),
        title: "专职消防队通讯考核工具",
        component: "TypeTest",
      },
      {
        image: getImageUrl("chuji_icon3"),
        title: "执勤车辆特种装备考核工具",
        component: "TypeTest",
      },
      {
        image: getImageUrl("chuji_icon4"),
        title: "重点单位考核工具",
        component: "TypeTest",
      },
      {
        image: getImageUrl("chuji_icon5"),
        title: "交通道路考核工具",
        component: "TypeTest",
      },
      {
        image: getImageUrl("chuji_icon6"),
        title: "通讯设备调度考核工具",
        component: "TypeTest",
      },
    ],
  },
  {
    title: "高级考核工具",
    array: [
      {
        image: getImageUrl("chuji_icon7"),
        title: "灾青事故特点和风险考核工具",
        component: "",
      },
      {
        image: getImageUrl("chuji_icon8"),
        title: "警情信息收集研判考校工具",
        component: "",
      },
      {
        image: getImageUrl("chuji_icon9"),
        title: "力品编成调度考根工具",
        component: "",
      },
      {
        image: getImageUrl("chuji_icon10"),
        title: "灾青事故特点和风险考核工具",
        component: "",
      },
      {
        image: getImageUrl("chuji_icon11"),
        title: "应总教援力量联动考校工具",
        component: "",
      },
      {
        image: getImageUrl("chuji_icon1"),
        title: "辆助指挥角色考核工具",
        component: "",
      },
    ],
  },
]);
/** 查询列表 */
function getList() {
  gettoolManager(queryParams.value).then((response) => {
    list.value = response;
    console.log(list.value,'list.value');
  });
}
function getlevelList() {
  listData({
    pageNum: 1,
    pageSize: 100,
    dictType: "sys_examination_level",
  }).then((response) => {
    levelList.value = response.rows;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  
  queryParams.value.pageNum = 1;
  getList();
}
// 修改
function handleEdit(item){
  console.log(item,'item');
  title.value = '编辑'
  
  form.value.toolId = item.toolId
  form.value.toolName = item.toolName
  form.value.toolLevel = item.toolLevel
  form.value.toolImage = item.toolImage
  open.value = true;
}
/** 添加按钮操作 */
function handleAdd() {
  open.value = true;
  form.value.toolId = ''
  title.value = '新增'
}
function submitForm() {
  if(form.value.toolId){
    toolManagerEdit(form.value).then((response) => {
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
    getList();
  });
  }else{
  toolManagerAdd(form.value).then((response) => {
    proxy.$modal.msgSuccess("新增成功");
    open.value = false;
    getList();
  });
}
}

function beforeAvatarUpload(file) {
  // 校检文件大小
  if (props.fileSize) {
    const isLt = file.size / 1024 / 1024 < props.fileSize;
    if (!isLt) {
      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
      return false;
    }
  }
  proxy.$modal.loading("正在上传文件，请稍候...");
  return true;
}

// 上传文件
function httpRequest(obj) {
  console.log(obj, "fileList", fileList);
  let formData = new FormData();

  formData.append("file", obj.file);
  ossUpload(formData).then((res) => {
    if (res.code == "200") {
      let { fileName, url, ossId } = res.data;
      form.value.toolImage = url
      imageUrl.value = url
    }
  });
}
/** 预览**/
function handlePreview(row) {
  preview.value = true;
  previewType.value = row.docSuffix;
  previewUrl.value = row.docUrl;
}


getlevelList();
getList()
</script>

<style lang="scss" scoped>
.exam-box-list {
  .box-body-wrapper {
    .body {
      padding: 0 20px;
      overflow: hidden;

      .close {
        font-size: 20px;
        margin-right: -10px;
        display: flex;
        cursor: pointer;
        justify-content: flex-end;
      }

      .exam-item-list {
        text-align: left;

        .module-title {
          color: #333399;
          font-weight: bolder;
          position: relative;
          display: flex;

          &::after {
            content: "";
            width: 100%;
            height: 1px;
            background-color: #d8dbf9;
            position: absolute;
            top: 50%;
            z-index: -1;
            margin-top: -1px;
          }

          img {
            width: 10px;
          }

          .type-title {
            background-color: #f1f3fc;
            padding: 0 10px;
          }
        }

        &:last-child {
          .exam-item-wrapper {
            .exam-item {
              margin-left: 12px;
            }
          }
        }

        .exam-item-wrapper {
          display: flex;
          .exam-item {
            padding: 20px;
            margin: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            &:hover {
              background: #ececec;
            }
            img {
              width: 80px;
              height: 80px;
            }

            .exam-title {
              font-size: 12px;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
img.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 15px;
  
}
</style>
